<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		ul{
			display: flex;
			width: 900px;	
			margin: 0 auto;
			
		}
		li{
			display: flex;
			display: block;
			width: 150px;
			height: 150px;
			/* border:1px solid red;		 */
			color: rgba(255, 255, 255, 0.648);
			text-align: center;
			line-height:70px;
			transition: 0.5s;
			background-size: 35px;
			background-position: 55px 35px;
			background-repeat: no-repeat;
		}
		li:hover{
			line-height: 130px;
			height: 180px;
		}
		.radius{
			width: 70px;
			height: 70px;
			margin-top: 21px;
			margin-left: 37px;	
			border-radius: 50%;
			/* border:1px solid red; */
			background-color: #eef4f730;
			transition: 0.5s;
		}

		li:hover .radius{
			transform: scale(0.8);
			opacity: 0;

		}
		li:nth-child(1){
			background-color: #b12600;
			background-image: url(img/home.png);
		}
		li:nth-child(2){
			background-color:  #d96200;
			background-image: url(img/化学.png);
		}
		li:nth-child(3){
			background-color: #00608d;
			background-image: url(img/毛笔.png);
			
		}
		li:nth-child(4){
			background-color:  #00407e;
			background-image: url(img/书签.png);
		}
		li:nth-child(5){
			background-color: #122838;
			background-image: url(img/icon_team-01.png);
		}
		li:nth-child(6){
			background-color:  #101922;
			background-image: url(img/邮箱.png);
			
		}
	</style>
</head>

<body>
	<h1 style="width: 310px; margin: 0 auto;" >CSS3响应式滑动菜单</h1>
	<ul>
		<li><div class="radius"></div>Home</li>
		<li><div class="radius"></div>Services</div></li>
		<li><div class="radius"></div>Portfolio</div></li>
		<li><div class="radius"></div>Blog</div></li>
		<li><div class="radius"></div>The team</div></li>
		<li><div class="radius"></div>Contact</div></li>
	</ul>
</body>

</html>